import React, { PureComponent } from 'react';
import { Modal, Form, Row, Input, Select } from 'antd';
// import { connect } from 'dva';
import lodash from 'lodash';
// import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { getPermissionModel } from '../../services/manage-by-permission-controller';
import { ResourcesTypeArray } from '../../utils/enum';
// import classNames from 'classnames';
import styles from './PermissionManageAdd.less';

@Form.create()
export default class PermissionManageAdd extends PureComponent {

  onCreate = () => {
    const { form, onOk } = this.props;
    if (!(onOk instanceof Function)) return;
    form.validateFields((err, formValues) => {
      if (err) return;
      const permissionData = formValues;
      if (lodash.trim(permissionData.permissionStr) === "") {
        permissionData.permissionStr = undefined;
      }
      onOk(permissionData);
    });
  }

  render() {
    const { permissionData, sysNameList, saveForm, visible, confirmLoading, onCancel, form } = this.props;
    const { getFieldDecorator } = form;
    if (saveForm instanceof Function) saveForm(form);
    const width = 200;
    return (
      <Modal
        width={670}
        visible={visible}
        confirmLoading={confirmLoading}
        title="新增权限"
        okText="确定"
        onCancel={onCancel}
        onOk={this.onCreate}
        maskClosable={false}
        bodyStyle={{ padding: '24px 24px 0 24px' }}
      >
        <Form layout="inline" className={styles.form}>
          <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
            <Form.Item label="所属系统" hasFeedback>
              {getFieldDecorator('sysName', {
                initialValue: permissionData ? permissionData.sysName : undefined,
                validateFirst: true,
                rules: [
                  { required: true, whitespace: true, message: '所属系统不能为空' },
                ],
              })(
                <Select placeholder="所属系统" allowClear={true} style={{ width }}>
                  {sysNameList.map(sysName => (<Select.Option key={sysName} value={sysName}>{sysName}</Select.Option>))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="权限标题" hasFeedback>
              {getFieldDecorator('title', {
                initialValue: permissionData ? permissionData.title : undefined,
                validateFirst: true,
                rules: [
                  { required: true, whitespace: true, message: '权限标题不能为空' },
                ],
              })(
                <Input placeholder="格式：[模块名称]-功能名称" style={{ width }} />
              )}
            </Form.Item>
          </Row>
          <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
            <Form.Item label="权限类型" hasFeedback>
              {getFieldDecorator('resourcesType', {
                initialValue: permissionData ? permissionData.resourcesType : undefined,
                validateFirst: true,
                rules: [
                  { required: true, whitespace: true, message: '权限类型不能为空' },
                ],
              })(
                <Select placeholder="权限类型" allowClear={true} style={{ width }}>
                  {ResourcesTypeArray.filter(item => item.value !== '1').map(item => (<Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>))}
                </Select>
              )}
            </Form.Item>
            <Form.Item label="权限标识" hasFeedback>
              {getFieldDecorator('permissionStr', {
                initialValue: permissionData ? permissionData.permissionStr : undefined,
                validateFirst: true,
                rules: [
                  {
                    validator(_, value, callback) {
                      const errors = [];
                      if (!value) {
                        callback(errors);
                        return;
                      }
                      if (value.length !== lodash.trim(value).length) {
                        errors.push("权限标识不能有空字符");
                        callback(errors);
                        return;
                      }
                      if (lodash.trim(value) === '') {
                        callback(errors);
                        return;
                      }
                      if (lodash.startsWith(value, '[auto]')) {
                        errors.push("权限标识不能以“[auto]”开始");
                        callback(errors);
                        return;
                      }
                      if (lodash.trim(value).length < 6) {
                        errors.push("权限标识至少需要6个字符长");
                        callback(errors);
                        return;
                      }
                      getPermissionModel(lodash.trim(value)).then(result => {
                        if (result) {
                          errors.push("权限标识已经存在");
                        }
                        callback(errors);
                      });
                    },
                  },
                ],
              })(
                <Input placeholder="格式：xxx-xxx-xxx-..." style={{ width }} />
              )}
            </Form.Item>
          </Row>
          <Row gutter={{ md: 0, lg: 0, xl: 0 }}>
            <Form.Item label="说明">
              {getFieldDecorator('description', {
                initialValue: permissionData ? permissionData.description : undefined,
                rules: [
                  { required: false, max: 127, message: '说明长度不能超过127个字符' },
                ],
              })(
                <Input.TextArea placeholder="说明" rows={3} autosize={{ minRows: 3, maxRows: 6 }} style={{ width: 505, maxWidth: 1000 }} />
              )}
            </Form.Item>
          </Row>
        </Form>
      </Modal>
    );
  }
}
